<!-- treeMenu.vue -->
<template>
    <div>
        <template>
            <div v-for="(item, index) in menuData" :key="`${index}-${item.meta.id}`">
                <el-menu-item v-if="!item.children || item.children.length === 0" :index="`${index}-${item.meta.id}`"
                    @click="handleClick(item)">
                    <i :class="item.meta.icon"></i>
                    <span>{{ item.meta.name }}</span>
                </el-menu-item>
                <el-submenu v-else :index="`${index}-${item.meta.id}`">
                    <template #title>
                        <i :class="item.meta.icon"></i>
                        <span>{{ item.meta.name }}</span>
                    </template>
                    <tree-menu :index="`${index}-${item.meta.id}`" :menuData="item.children" />
                </el-submenu>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'TreeMenu',
    props: {
        menuData: {
            type: Array,
            required: true
        },
        index: {
            type: [Number, String],
            required: true
        }
    },
    methods: {
        handleClick(item) {
            if (item.meta && item.meta.path) {
                this.$router.push(item.meta.path);
            }
            this.$store.commit('addMenu', item.meta);
        },
    }
}


</script>
